var index = 0;
var categoryStore = Ext.create('Ext.data.TreeStore', {
			root : {
				"children" : [{
							"id" : "1",
							"text" : "Cloud Computing",
							"leaf" : false,
							"children" : [{
										"id" : "6",
										"text" : "EC2 Setup",
										"leaf" : true,
										"expanded" : "true"
									}, {
										"id" : "7",
										"text" : "AMI creation",
										"leaf" : true,
										"expanded" : "true"
									}, {
										"id" : "8",
										"text" : "Instance mgmt",
										"leaf" : true,
										"expanded" : "true"
									}],
							"expanded" : "false"
						}, {
							"id" : "2",
							"text" : "Spring",
							"leaf" : false,
							"children" : [{
										"id" : "9",
										"text" : "MVC",
										"leaf" : true,
										"expanded" : "true"
									}, {
										"id" : "10",
										"text" : "Web flow",
										"leaf" : true,
										"expanded" : "true"
									}],
							"expanded" : "false"
						}, {
							"id" : "3",
							"text" : "Ext JS",
							"leaf" : false,
							"children" : [{
										"id" : "11",
										"text" : "Ext JS setup",
										"leaf" : true,
										"expanded" : "true"
									}, {
										"id" : "12",
										"text" : "Grid",
										"leaf" : false,
										"children" : [{
													"id" : "13",
													"text" : "Inline Grid",
													"leaf" : true,
													"expanded" : "true"
												}, {
													"id" : "14",
													"text" : "GridWithPagination",
													"leaf" : true,
													"expanded" : "true"
												}],
										"expanded" : "true"
									}],
							"expanded" : "false"
						}]
			}
		});

// Combo box creation
// Define the model for a State
Ext.regModel('State', {
			fields : [{
						type : 'string',
						name : 'abbr'
					}, {
						type : 'string',
						name : 'name'
					}, {
						type : 'string',
						name : 'slogan'
					}]
		});
// The data for all states
var states = [{
			"abbr" : "AL",
			"name" : "Alabama",
			"slogan" : "The Heart of Dixie"
		}, {
			"abbr" : "AK",
			"name" : "Alaska",
			"slogan" : "The Land of the Midnight Sun"
		}, {
			"abbr" : "AZ",
			"name" : "Arizona",
			"slogan" : "The Grand Canyon State"
		}, {
			"abbr" : "AR",
			"name" : "Arkansas",
			"slogan" : "The Natural State"
		}, {
			"abbr" : "CA",
			"name" : "California",
			"slogan" : "The Golden State"
		}, {
			"abbr" : "CO",
			"name" : "Colorado",
			"slogan" : "The Mountain State"
		}, {
			"abbr" : "CT",
			"name" : "Connecticut",
			"slogan" : "The Constitution State"
		}, {
			"abbr" : "DE",
			"name" : "Delaware",
			"slogan" : "The First State"
		}, {
			"abbr" : "DC",
			"name" : "District of Columbia",
			"slogan" : "The Nation's Capital"
		}, {
			"abbr" : "FL",
			"name" : "Florida",
			"slogan" : "The Sunshine State"
		}, {
			"abbr" : "GA",
			"name" : "Georgia",
			"slogan" : "The Peach State"
		}, {
			"abbr" : "HI",
			"name" : "Hawaii",
			"slogan" : "The Aloha State"
		}, {
			"abbr" : "ID",
			"name" : "Idaho",
			"slogan" : "Famous Potatoes"
		}, {
			"abbr" : "IL",
			"name" : "Illinois",
			"slogan" : "The Prairie State"
		}, {
			"abbr" : "IN",
			"name" : "Indiana",
			"slogan" : "The Hospitality State"
		}, {
			"abbr" : "IA",
			"name" : "Iowa",
			"slogan" : "The Corn State"
		}, {
			"abbr" : "KS",
			"name" : "Kansas",
			"slogan" : "The Sunflower State"
		}, {
			"abbr" : "KY",
			"name" : "Kentucky",
			"slogan" : "The Bluegrass State"
		}, {
			"abbr" : "LA",
			"name" : "Louisiana",
			"slogan" : "The Bayou State"
		}, {
			"abbr" : "ME",
			"name" : "Maine",
			"slogan" : "The Pine Tree State"
		}, {
			"abbr" : "MD",
			"name" : "Maryland",
			"slogan" : "Chesapeake State"
		}, {
			"abbr" : "MA",
			"name" : "Massachusetts",
			"slogan" : "The Spirit of America"
		}, {
			"abbr" : "MI",
			"name" : "Michigan",
			"slogan" : "Great Lakes State"
		}, {
			"abbr" : "MN",
			"name" : "Minnesota",
			"slogan" : "North Star State"
		}, {
			"abbr" : "MS",
			"name" : "Mississippi",
			"slogan" : "Magnolia State"
		}, {
			"abbr" : "MO",
			"name" : "Missouri",
			"slogan" : "Show Me State"
		}, {
			"abbr" : "MT",
			"name" : "Montana",
			"slogan" : "Big Sky Country"
		}, {
			"abbr" : "NE",
			"name" : "Nebraska",
			"slogan" : "Beef State"
		}, {
			"abbr" : "NV",
			"name" : "Nevada",
			"slogan" : "Silver State"
		}, {
			"abbr" : "NH",
			"name" : "New Hampshire",
			"slogan" : "Granite State"
		}, {
			"abbr" : "NJ",
			"name" : "New Jersey",
			"slogan" : "Garden State"
		}, {
			"abbr" : "NM",
			"name" : "New Mexico",
			"slogan" : "Land of Enchantment"
		}, {
			"abbr" : "NY",
			"name" : "New York",
			"slogan" : "Empire State"
		}, {
			"abbr" : "NC",
			"name" : "North Carolina",
			"slogan" : "First in Freedom"
		}, {
			"abbr" : "ND",
			"name" : "North Dakota",
			"slogan" : "Peace Garden State"
		}, {
			"abbr" : "OH",
			"name" : "Ohio",
			"slogan" : "The Heart of it All"
		}, {
			"abbr" : "OK",
			"name" : "Oklahoma",
			"slogan" : "Oklahoma is OK"
		}, {
			"abbr" : "OR",
			"name" : "Oregon",
			"slogan" : "Pacific Wonderland"
		}, {
			"abbr" : "PA",
			"name" : "Pennsylvania",
			"slogan" : "Keystone State"
		}, {
			"abbr" : "RI",
			"name" : "Rhode Island",
			"slogan" : "Ocean State"
		}, {
			"abbr" : "SC",
			"name" : "South Carolina",
			"slogan" : "Nothing Could be Finer"
		}, {
			"abbr" : "SD",
			"name" : "South Dakota",
			"slogan" : "Great Faces, Great Places"
		}, {
			"abbr" : "TN",
			"name" : "Tennessee",
			"slogan" : "Volunteer State"
		}, {
			"abbr" : "TX",
			"name" : "Texas",
			"slogan" : "Lone Star State"
		}, {
			"abbr" : "UT",
			"name" : "Utah",
			"slogan" : "Salt Lake State"
		}, {
			"abbr" : "VT",
			"name" : "Vermont",
			"slogan" : "Green Mountain State"
		}, {
			"abbr" : "VA",
			"name" : "Virginia",
			"slogan" : "Mother of States"
		}, {
			"abbr" : "WA",
			"name" : "Washington",
			"slogan" : "Green Tree State"
		}, {
			"abbr" : "WV",
			"name" : "West Virginia",
			"slogan" : "Mountain State"
		}, {
			"abbr" : "WI",
			"name" : "Wisconsin",
			"slogan" : "America's Dairyland"
		}, {
			"abbr" : "WY",
			"name" : "Wyoming",
			"slogan" : "Like No Place on Earth"
		}];
// The data store holding the states
var store = Ext.create('Ext.data.Store', {
			model : 'State',
			data : states
		});

articleTab = Ext.createWidget('tabpanel', {
			plain : true,
			height : 630,
			border : 0,
			tabPosition : 'top',
			margin : '0 0 0 3',
			plugins : Ext.create('Ext.ux.TabReorderer')
		});

articleHeaderForm = Ext.create('Ext.form.Panel', {
			margin : '5 5 5 5',
			border : 0,
			layout : 'table',
			id : 'articleHeaderForm',
			trackResetOnLoad : true,
			itemId : 'articleHeaderForm',
			items : [{
						xtype : 'textfield',
						// labelAlign: 'top',
						fieldLabel : 'Article Header name',
						name : 'name',
						border : 0,
						width : 350,
						labelWidth : 130,
						autoScroll : true,
						allowBlank : false
					}/*, {
						xtype : 'combobox',
						// labelAlign: 'top',
						fieldLabel : 'Article Category',
						// renderTo: 'simpleCombo',
						displayField : 'name',
						margin : '5 5 5 5',
						// width: 500,
						emptyText : 'Select',
						labelWidth : 130,
						width : 350,
						store : store,
						queryMode : 'local',
						typeAhead : true
					}*/, {
						xtype : 'hidden',
						id : 'articleHeaderId'
					}]
		});

function loadPage() {
	
	createUploadHeader();
	createUploadArticleForm();
}

function createUploadHeader() {

	Ext.create('Ext.panel.Panel', {
				renderTo : 'articleForm',
				autoScroll : true,
				border : false,
				items : [articleHeaderForm, articleTab]
			});
}

function createUploadArticleForm() {
	Ext.getCmp("messageBar").add({
				xtype : 'button',
				text : 'Preview',
				handler : function() {

				}
			});
/*	Ext.getCmp("messageBar").add({
				xtype : 'button',
				text : 'Add Page',
				handler : function() {
					addNewPage();
				}
			});*/
	Ext.getCmp("messageBar").add({
		xtype : 'button',
		text : 'Publish',
		handler : function() {
			articleHeaderForm.getForm().submit({
						url : 'article/publishArticleHeader.json',
						params : {
							articleHeaderId : Ext.getCmp("articleHeaderId")
									.getValue()
						},
						success : function(form, action) {
							Ext.getCmp("messageBar")
									.setStatus(action.result.message);
						},
						failure : function(form, action) {
							Ext.getCmp("messageBar")
									.setStatus(action.result.message);
						}
					});
		}
	});

	Ext.getCmp("messageBar").add({
		xtype : 'button',
		text : 'Delete',
		handler : function() {
			articleHeaderForm.getForm().submit({
						url : 'article/deleteArticleHeader.json',
						params : {
							articleHeaderId : Ext.getCmp("articleHeaderId")
									.getValue()
						},
						success : function(form, action) {
							Ext.getCmp("messageBar")
									.setStatus(action.result.message);
						},
						failure : function(form, action) {
							Ext.getCmp("messageBar")
									.setStatus(action.result.message);
						}
					});
		}
	});

	addNewPage();
}

function addNewPage() {
	index = index + 1;
	articleForm = Ext.create('Ext.form.Panel', {
		layout : {
			type : 'anchor'
		},
		margin : '5 5 5 5',
		buttonAlign : 'left',
		border : 0,
		// width: 500,
		autoScroll : true,

		items : [
				/*
				 * { xtype : 'fieldset', title : 'Header', defaultType :
				 * 'textfield', layout : { type : 'table', columns : 2 }, items : [
				 */
				{
			xtype : 'textfield',
			labelAlign : 'top',
			fieldLabel : 'Page Name',
			name : 'name',
			// anchor : '100%',
			width : 350,
			allowBlank : false
		}/*
			 * , { fieldLabel : 'Category', xtype : 'treepanel', id :
			 * 'categoryTreePanel', rootVisible : false, autoScroll : true,
			 * store : categoryStore, allowBlank : false, anchor : '100%', width :
			 * 150, allowBlank : false, height : 90, rowspan : 2, // padding :
			 * '5px', margin : '0 20px 0', listeners : { selectionchange :
			 * function( view, selections, options) { for ( var i = 0; i <
			 * selections.length; i++) { articleCategoryId.value = selections[i]
			 * .getId(); } } } }
			 *//*
			 * , { xtype : 'textareafield', labelAlign: 'top', fieldLabel :
			 * 'Description', name : 'description', width : 500, anchor : '100%' }
			 *//*
			 * ] }
			 */, {
			xtype : 'htmleditor',
			width : 580,
			labelAlign : 'top',
			fieldLabel : 'Article Content',
			margin : '5 5 5 5',
			name : 'articleContent',
			height : 430,
			// width: 850,

			maxLength : 50,
			anchor : '100%',
			colspan : 2
		}, {
			xtype : 'hiddenfield',
			name : 'articleCategoryId',
			id : 'articleCategoryId'
		}, {
			xtype : 'hiddenfield',
			name : 'id',
			id : 'id'
		}],
		buttons : [{
			text : 'Save',
			handler : function() {
				articleDetailsForm = this.up('form').getForm();
				//alert("articleHeaderForm.getForm(iiiiiiiii).isDirty() : " + Ext.getCmp("articleHeaderForm").getForm().isDirty());
				if (!articleHeaderForm.getForm().isValid()) {
					Ext
							.getCmp("messageBar")
							.setStatus("Article page data is invalid. Please correct the errors");

				} else {
					if (articleHeaderForm.getForm().isDirty()) {
						alert(" header form is DIRTY");
						articleHeaderRecord = articleHeaderForm.getForm()
								.getValues();
						articleHeaderForm.getForm().submit({
							url : 'article/saveArticleHeader.json',
							params : {
								articleHeaderRecord : Ext.JSON
										.encode(articleHeaderRecord),
								articleHeaderId : Ext.getCmp("articleHeaderId")
										.getValue()
							},
							success : function(form, action) {
								Ext
										.getCmp("articleHeaderId")
										.setValue(action.result.articleHeaderId);
								//articleHeaderForm.getForm().trackResetOnLoad = true;
								articleHeaderForm.getForm().setValues(articleHeaderForm.getForm().getValues());
								saveArticleDetailsForm(articleDetailsForm,action.result.articleHeaderId);
							},
							failure : function(form, action) {
								Ext.getCmp("messageBar")
										.setStatus(action.result.message);
							}
						});
					} else {
						alert(" header form is NOT dirty");
						saveArticleDetailsForm(articleDetailsForm, Ext
										.getCmp("articleHeaderId").getValue());
					}
				}

			}
		}, {
			text : 'Reset',
			handler : function() {
				this.up('form').getForm().reset();
				articleHeaderForm.getForm().reset();
			}
		}, {
			xtype : 'button',
			text : 'Add Page',
			handler : function() {
				addNewPage();
			}
		}]
	});

	articleTab.add({
				title : "Page: " + index,
				items : articleForm
			}).show();
	//articleTab.setActiveTab(articleForm);
}

function saveArticleDetailsForm(articleDetailsForm, articleHeaderId) {
	// alert("saveArticleDetailsForm - > articleHeaderId : " + articleHeaderId)

	articlePageRecord = articleDetailsForm.getValues();
	if (!articleDetailsForm.isValid()) {
		Ext.getCmp("messageBar").setStatus("Article page data is invalid. Please correct the errors");
	} else {
		Ext.getCmp("messageBar").setStatus("Saving Article information...");
		alert(Ext.getCmp("id").getValue());
		articleDetailsForm.submit({
					url : 'article/saveArticleDetails.json',
					params : {
						articlePage : Ext.JSON.encode(articlePageRecord),
						articleHeaderId : articleHeaderId
					},
					success : function(form, action) {
						Ext.getCmp("id").setValue(action.result.articleId);
						Ext.getCmp("messageBar").setStatus(action.result.message);
					},
					failure : function(form, action) {
						Ext.getCmp("messageBar")
								.setStatus(action.result.message);
					}
				});
	}
}